import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Tabs, WhiteSpace, Toast } from 'antd-mobile'
import MyInfoListView from '../../components/my_listview/my_info_listview'
import { queryAllInfoByFloorAsync } from '../../redux/actions'
import ReactSVG from 'react-svg'
import * as d3 from 'd3'


const tabs = [
    { title: '第一层',file:'floor1.svg',fid:1 },
    { title: '第二层',file:'floor2.svg',fid:2 },
    { title: '第三层',file:'floor1.svg',fid:1 },
    { title: '第四层',file:'floor1.svg',fid:1 },
    { title: '第五层',file:'floor1.svg',fid:1 },
]

class Info extends Component {
    constructor(props) {
        super(props)

        this.state = {
            circleArrays: this.props.list,
            dataSource: this.props.dataSource,
            currentFloor:'floor1.svg'
        }

        console.log('constructor')

    }

    // renderContent = tab =>{
    //     console.log('renderContent')
    //     return (
    //         <div style={{ display: 'flex', flexDirection: 'column', backgroundColor: '#fff' }}>
    //             <WhiteSpace />
    //             <ReactSVG src={`http://127.0.0.1:5500/test/${this.state.currentMap}`}
    //                 loading={() => <span>Loading</span>}
    //                 svgStyle={{ fontSize: 24,textAnchor:"middle" }}
    //                 onInjected={(error, svg) => {
    //                     // console.log(this.state.circleArrays)
    //                     if (this.state.circleArrays) {
    //                         let circles = d3.select(svg).selectAll('g').data(this.state.circleArrays).enter().append('g').attr('id', function (d) {
    //                             return d.id
    //                         }).each(function (d) {
    //                             d3.select(this).append('circle').attr('cx', function (d) {
    //                                 return d.cx
    //                             }).attr('cy', function (d) {
    //                                 return d.cy
    //                             }).attr('r', function (d) {
    //                                 return d.r
    //                             }).attr('fill', function (d) {
    //                                 return d.fill
    //                             })
    //                             d3.select(this).append('text').text(d.name.substring(2)).attr('x', d.cx).attr('y', d.cy+7)
    //                             d3.select(this).on('click', function (d) {
    //                                 Toast.info(d.name)
                
    //                             })
    //                         })
    //                     }
                        
    //                 }} />
    //             <WhiteSpace />
    //             <MyInfoListView dataSource={this.state.dataSource} />
    //         </div>
    //     )
    // }
    



    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps')
        if (nextProps.dataSource !== this.props.dataSource) {
            this.setState({
                dataSource: nextProps.dataSource,
                circleArrays: nextProps.list,
            })
        }
    }

    // componentDidUpdate(){

        
    // }

    handleTabChange = (tabData, index) => {
        console.log('handleTabChange')
        // Toast.info(tabData.title)
        this.props.queryAllInfoByFloorAsync(tabData.fid)
        this.setState({
            currentFloor:tabData.file
        })
    }

    render() {
        console.log('render')
        return (
            <Tabs tabs={tabs} onTabClick={this.handleTabChange} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
                <div style={{ display: 'flex', flexDirection: 'column', backgroundColor: '#fff' }}>
                <WhiteSpace />
                <ReactSVG src={`http://images.fire.zshawk.cn/firealarm/images/svg/${this.state.currentFloor}`}
                    loading={() => <span>Loading</span>}
                    svgStyle={{ fontSize: 24,textAnchor:"middle" }}
                    evalScripts='always'
                    onInjected={(error,svg)=>{
                        const {circleArrays} = this.state
                        if (circleArrays) {
                            d3.select(svg).selectAll('g').data(circleArrays).enter().append('g').each(function (d) {
                                d3.select(this).attr('id',d.id)
                                d3.select(this).append('circle').attr('cx',d.cx).attr('cy',d.cy).attr('r',d.r).attr('fill',d.fill)
                                d3.select(this).append('text').text(d.name.substring(2)).attr('x', d.cx).attr('y', d.cy+7)
                                d3.select(this).on('click', function (d) {
                                    Toast.info(d.name)
                
                                })
                            })
                        }
                    }}
                ></ReactSVG>
                <WhiteSpace />
                <MyInfoListView dataSource={this.state.dataSource} />
            </div>
            </Tabs>
        )
    }

    componentDidUpdate(){
        console.log('componentDidUpdate')
        
        
    }

    componentDidMount() {
        console.log('componentDidMount')
        this.props.queryAllInfoByFloorAsync(1)
    }
}

export default connect(
    state => ({ dataSource: state.watchListData.datasource, list: state.watchListData.dataBlob }),
    { queryAllInfoByFloorAsync })(Info)